window.addEventListener('load', function () {
    var banner = document.querySelector('.banner');
    var arrow = document.querySelector('.arrow');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var width = 1116;
    var timer;

    // 鼠标进入时，取消自动点击
    banner.addEventListener('mouseenter', function () {
        arrow.style.display = 'block';
        clearInterval(timer); // 清除定时器
    });

    // 鼠标离开时开启定时器
    banner.addEventListener('mouseleave', function () {
        arrow.style.display = 'none';
        timer = setInterval(function () {
            next.click();
        }, 3000); // 重新启动定时器
    });

    var ul = banner.querySelectorAll('ul');
    for (var i = 0; i < ul[0].children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ul[1].appendChild(li);
        li.addEventListener('click', function () {
            for (var i = 0; i < ul[1].children.length; i++) {
                ul[1].children[i].className = '';
            }
            this.className = 'on';
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            animate(ul[0], -index * width);
        });
    }

    ul[1].children[0].className = 'on';

    var first = ul[0].children[0].cloneNode(true);
    ul[0].appendChild(first);
    var num = 0;
    var circle = 0;

    // 后翻页
    next.addEventListener('click', function () {
        clearInterval(timer); // 清除定时器
        // 圆点到最后将圆点归位
        if (num == ul[0].children.length - 1) {
            ul[0].style.left = 0;
            num = 0;
        }
        num++;
        // 这是你的动画函数animate.js, 传入的是 (ul标签对象, 计算步长, 回调函数 
        animate(ul[0], -num * width, function () {
            // 清除先前的定时器
            clearInterval(timer);
            // 重新启动定时器
            timer = setInterval(function () {
                next.click();
            }, 3000);
        });
        circle++;
        if (circle == ul[1].children.length) {
            circle = 0;
        }
        circleChange();
    });

    // 前翻页
    prev.addEventListener('click', function () {
        clearInterval(timer); // 清除定时器
        // 圆点到最后将圆点归位, 才能保证滚动
        if (num == 0) {
            ul[0].style.left = -(ul[0].children.length - 1) * width + 'px';
            num = ul[0].children.length - 1;
        } else {
            num--;
        }
        // 这是你的动画函数animate.js, 传入的是 (ul标签对象, 计算步长, 回调函数 
        animate(ul[0], -num * width, function () {
            // 清除先前的定时器
            clearInterval(timer);
            // 重新启动定时器
            timer = setInterval(function () {
                next.click();
            }, 3000);
        });
        circle--;
        if (circle < 0) {
            circle = ul[1].children.length - 1;
        }
        circleChange();
    });
    //排它思想 小圆圈颜色变化
    function circleChange() {
        for (var i = 0; i < ul[1].children.length; i++) {
            ul[1].children[i].className = ''; // 把每个 li 类去掉
        }
        ul[1].children[circle].className = 'on'; // 当前的 li 设置类
    }
    timer = setInterval(function () {
        next.click();
    }, 3000);
});
